<template>
    <el-container style="background-color: rgb(238, 241, 246);border: 1px solid #eee">
        <el-container>
            <el-header  >
                <div style="float: left;height:60px;line-height:60px;font-size: 20px;">
                    天佑OA系统后台管理系统
                </div>
                <div style="float: right;font-size: 12px;">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>Admin</span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: rgb(238, 241, 246);">
                    <el-menu >
                        <el-submenu v-for="menu in menus" :index="menu.title">
                            <template slot="title"><i :class="menu.icon"></i>{{menu.title}}</template>
                            <router-link v-for="item in menu.items" :to="item.path">
                                <el-menu-item :index="item.title">
                                    {{item.title}}
                                </el-menu-item>
                            </router-link>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import menus from "@/menu";

    export default {
        name: "Index",
        data() {
            return {
                menus: menus
            }
        },
        mounted(){
            this.$router.push("/User");
        }
    }
</script>

<style scoped>

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    a{
        text-decoration: none;
        color:#333333;
    }
</style>